﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>
    <style type="text/css">
        body, html, #map
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
        #l-map
        {
            height: 100%;
            width: 78%;
            float: left;
            border-right: 2px solid #bcbcbc;
        }
        #r-result
        {
            height: 100%;
            width: 20%;
            float: left;
        }
    </style>
</head>
<script type="text/javascript">
    //http: //developer.baidu.com/map/jsdemo.htm
    function initialize() {
        var mp = new BMap.Map('map');
        mp.centerAndZoom(new BMap.Point(121.491, 31.000), 11);
        var point1 = new BMap.Point(121.491, 31.000);
        var point2 = new BMap.Point(121.400, 31.233);
        var point3 = new BMap.Point(121.000, 31.233);
        var point4 = new BMap.Point(121.300, 31.233);



        addMarker(point2, mp, "经销商", "茅台酒武汉经销商", false);
        addMarker(point3, mp, "经销商", "茅台酒广州经销商", false);
        addMarker(point4, mp, "零售商", "茅台酒业无锡零售商", false);
        addMarker(point1, mp, "生产厂商", "茅台股份", true);
        addOverlay(point1, point2, mp);
        addOverlay(point1, point3, mp);
        addOverlay(point1, point4, mp);

    }

    //添加信息框
    function addInfoWindow(map, title, content, point, isOpen) {
        var opts = {
            width: 250,     // 信息窗口宽度
            height: 100,     // 信息窗口高度
            title: title  // 信息窗口标题
        }
        var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
        if (isOpen) {
            map.openInfoWindow(infoWindow, point); //开启信息窗口
        }
        return infoWindow;
    }

    //添加折线
    function addOverlay(point_main, point_child, mp) {
        var polyline = new BMap.Polyline([
  point_main,
 point_child
], { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
        mp.addOverlay(polyline);
    }
    //添加标注
    function addMarker(point, mp, title, content, isOpenInfoWindow) {
        var marker = new BMap.Marker(point);  // 创建标注
        mp.addOverlay(marker);              // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        marker.addEventListener("mouseover", function () { this.openInfoWindow(addInfoWindow(mp, title, content, point, isOpenInfoWindow)); });
    }
    function loadScript() {
        var script = document.createElement("script");
        script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";

        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>
<body>
    <div id="map">
    </div>
</body>
</html>
